<template>
      <div> 
          <div class="nav d-flex jc-between pt-3 mx-1">
            <!-- $refs.list.swiper.slideTo(i) swiper组件自带属性--滑动到指定索引值 -->
            <div class="nav-link" :class="{active1: active === i}" v-for="(item,i) in categories" :key="i" @click="$refs.list.swiper.slideTo(i)">
              {{item.name}}
            </div>

            
          </div>
                   <!-- 内容 -->
         <div class="pt-3">
          <!-- //options="{autoHeight: true}" 自动高度-->
          <!-- $refs.list.swiper.realIndex swiper组件自带属性 --当前索引值 -->
         <swiper ref="list" @slide-change="() => active = $refs.list.swiper.realIndex" :options="{autoHeight: true}">
           <swiper-slide v-for="(category,i) in categories" :key= "i">
             <slot name="items" :category="category"></slot> 
           </swiper-slide>
           
         </swiper>
         </div>
       </div> 
</template>

<script>
  export default {
          props: {
            categories: {type: Array ,require: true}
          },
          data(){
             return {
              active: 0
             }
          }
  }
</script>


<style lang="scss">
  
</style>